<template>
    <div class="container">
        <div class="item item1">
            <div class="title">grid布局</div>
            <div class="grid-wrapper">
                <div class="grid-item" :class="{'grid-item-special': item == 1}" v-for="item in 9" :key="item">{{ item }}</div>
            </div>
            <div class="btn-wrapper">
                <div class="btn" @click="replay">重播</div>
            </div>
        </div>
        <div class="item item2">
            <div class="title">按钮动画</div>
            <div class="color-wrapper">
                <div class="green link" @click="jumpSection">跳转</div>
                <div class="blue link">链接</div>
                <div class="orange link">链接</div>
            </div>
        </div>
        <div class="item item3">
            <div class="title">翻转文字</div>
            <div class="text-wrapper">
                <div class="sight">
                    <div class="text" ref="text1">NO 1</div>
                </div>
                <div class="sight">
                    <div class="text" ref="text2">TIKTOKER</div>
                </div>
                <div class="sight">
                    <div class="text" ref="text3">ACTOR</div>
                </div>
                <div class="sight">
                    <div class="text" ref="text4">ICON</div>
                </div>
            </div>
        </div>
        <div class="item item4" ref="item4">
            <div class="title">滚动捕捉</div>
            <div class="inner-wrapper">
                <div class="inner-item">1</div>
                <div class="inner-item">2</div>
                <div class="inner-item">3</div>
                <div class="inner-item">4</div>
            </div>
        </div>
        <div class="item item5">
            <div class="title">CSS滚动</div>
            <div class="css-wrapper">
                <div class="section-title">横向循环滚动</div>
                <ItemA />
                <div class="section-title">纵向循环滚动</div>
                <ItemB />
                <div class="section-title">音乐跳动</div>
                <div class="wrapper">
                    <ul class="music">
                        <li v-for="item in 7" :class="'music_m'+(item+1)"></li>
                    </ul>
                </div>
                <div class="section-title">Smoke</div>
                <div class="smoke_effect">
                    <span>C</span>
                    <span>S</span>
                    <span>S</span>
                    <span></span>
                    <span>I</span>
                    <span>S</span>
                    <span></span>
                    <span>G</span>
                    <span>O</span>
                    <span>O</span>
                    <span>D</span>
                </div>
                <div class="section-title">加载</div>
                <div class="loader"></div>
            </div>
        </div>
        <div class="item item6">
            <div class="title">延迟加载</div>
            <div class="lazy-wrapper">
                <div>
                    <div class="sub-title">监听scroll实现</div>
                    <Lazyload />
                </div>
                <div>
                    <div class="sub-title">IntersectionObserver实现</div>
                    <Lazyload2 />
                </div>
            </div>
        </div>
        <div class="item item7">
            <div class="title">瀑布流</div>
            <div class="waterfall-wrapper">
                <Waterfall />
            </div>
        </div>
        
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/all";
import ItemA from "./CSSComps/item1.vue";
import ItemB from "./CSSComps/item2.vue";
import ItemC from "./CSSComps/item3.vue";
import Lazyload from "./CSSComps/lazyload.vue";
import Lazyload2 from './CSSComps/lazyload2.vue';
import Waterfall from "./CSSComps/waterfall.vue";

const text1 = ref(null);
const text2 = ref(null);
const text3 = ref(null);
const text4 = ref(null);
const item4 = ref(null);

// const ani1 = () => {
//     const tl = gsap.timeline();
//     tl.to(block.value, { x: 100, duration: 2 });
//     tl.to(block.value, { y: 50, duration: 2 }, "<-=1");
//     tl.to(block.value, { opacity: 0, duration: 2 });
// }

const ani2 = () => {
    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: ".item2",
            start: "top top",
            end: "bottom bottom",
            scrub: 1
        }
    });
    tl.to(".green", {x:750, rotation:360, duration:2, 'backgroundColor': 'blue'})
    // add blueGreenSpin label 1 second after end of timeline
    .addLabel("blueGreenSpin", "+=0.5")
    //add tween at blueGreenSpin label
    .to(".blue", {x:750, rotation:360, duration:2, 'backgroundColor': 'orange'}, "blueGreenSpin")
    //insert tween 0.5 seconds after blueGreenSpin label
    .to(".orange", {x:750, rotation:360, duration:2, 'backgroundColor': 'green'}, "blueGreenSpin+=0.5");
}

const ani3 = () => {
    const tl = gsap.timeline({
        scrollTrigger: {
            trigger: ".text-wrapper",
            start: "top top",
            end: "bottom bottom",
            scrub: 4
        }
    })
    tl.to(text1.value, {'transform': 'skewY(26deg) rotateY(60deg)', opacity: 1, duration: 3});
    tl.to(text2.value, {'transform': 'skewY(23deg) rotateY(65deg)', opacity: 1, duration: 3}, "<+=1");
    tl.to(text3.value, {'transform': 'skewY(20deg) rotateY(70deg)', opacity: 1, duration: 3}, "<+=1");
    tl.to(text4.value, {'transform': 'skewY(17deg) rotateY(75deg)', opacity: 1, duration: 3}, "<+=1");
}

const ani4 = () => {
    gsap.to(".grid-item-special", {'grid-column-start':'1', 'grid-column-end':'2', delay: 1, duration: 1})
}

const jumpSection = () => {
    item4.value.scrollIntoView()
}

const replay = () => {
    gsap.fromTo(".grid-item-special", {'grid-column-start':'1', 'grid-column-end':'3'}, {'grid-column-start':'1', 'grid-column-end':'1', delay: 1, duration: 1})
}

onMounted(() => {
    gsap.registerPlugin(ScrollTrigger)
    ani2()
    ani3()
    ani4()
})
</script>

<style lang="scss" scoped>
.container {
    // scroll-snap-type: y proximity;
    // overflow-y: scroll;
    // scroll-padding: 40px 0 0 0;
    height: 100vh;
    .item {
        // scroll-snap-align: start;
        height: 100vh;
        font-size: 4rem;
    }
    .item1 {
        background: rgb(194, 192, 192);
        .grid-wrapper {
            padding: 4rem 26rem;
            display: grid;
            grid-template-columns: repeat(3, auto);
            grid-template-rows: repeat(3, auto);
            grid-gap: 3px;
            .grid-item {
                text-align: center;
                &:nth-child(odd) {
                    background-color: #eee;
                }
                &:nth-child(even) {
                    background-color: #aaa;
                }
            }
            .grid-item-special {
                grid-column-start: 1;
                grid-column-end: 3;
            }
        }
        .btn-wrapper {
            width: 100%;
            background: rgb(194, 192, 192);
            .btn {
                left: 50%;
                transform: translateX(-50%);
                font-size: 20px;
                width: 140px;
                height: 40px;
                background-color: #fff;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
        }
    }
    .item2 {
        background: azure;
        .color-wrapper {
            width: 100%;
            height: 100%;
            text-align: center;
            padding-top: 4rem;
            .link {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                color: #fff;
                cursor: pointer;
            }
            .green {
                width: 40px;
                height: 40px;
                border-radius: 6px;
                background-color: green;
                margin-bottom: 6px;
            }
            .blue {
                width: 40px;
                height: 40px;
                border-radius: 6px;
                background-color: blue;
                margin-bottom: 6px;
            }
            .orange {
                width: 40px;
                height: 40px;
                border-radius: 6px;
                background-color: orange;
            }
        }
    }
    .item3 {
        background: blanchedalmond;
        .text-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #000;
            .sight {
                perspective: 300px;
                -webkit-perspective: 300px;
                .text {
                    font-weight: bold;
                    font-size: 46px;
                    opacity: 0;
                    line-height: 40px;
                    transform-origin : 50% 0;
                    /* background-color: #fff; */
                }
            }
        }
    }
    .item4 {
        background: lightyellow;
        color: white;
        .inner-wrapper {
            scroll-snap-type: y proximity;
            overflow-y: scroll;
            width: 400px;
            height: 400px;
            margin: 4rem auto;
            .inner-item {
                scroll-snap-align: start;
                height: 300px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 4rem;
                &:nth-child(odd) {
                    background-color:#aaa;
                }
                &:nth-child(even) {
                    background-color: lightskyblue;
                }
            }
        }
    }
    .item5 {
        background: lightgrey;
        .css-wrapper {
            width: 100%;
            padding: 0 400px;
            .section-title {
                font-size: 16px;
            }
            .wrapper {
                width: 90px;
                height: 40px;
                margin: 20px auto;
                background-color:#f1f1f1;
                opacity: 0.5;
                position: relative;
                ul {
                    padding: 0px;
                    line-height: 30px;
                    text-align: center;
                    li {
                        list-style: none;
                        background-color: #111;
                        margin-left: 5px;
                        display: inline-block;
                        width: 5px;
                        height: 24px;
                        &:first-child {
                            margin-left: 0px;
                        }
                    }
                }
            }
            .smoke_effect{
                span {
                    display: inline-block;
                    color: #fff;
                    text-align: center;
                    margin: 10px;
                    font-size: 30px;
                    text-shadow: 0 0 0 whitesmoke;
                    animation: smoky 5s 3s infinite;
                    &:nth-child(even){
                        animation-name: smoky-mirror;
                    }
                }

                @for $item from 1 through 11 {
                    span:nth-of-type(#{$item}){ 
                        animation-delay: #{(3 + ($item/10))}s; 
                    }
                } 
            }
            @keyframes smoky {
                60% {
                    text-shadow: 0 0 40px whitesmoke;
                }
                to {
                    transform:
                        translate3d(15rem,-8rem,0)
                        rotate(-40deg)
                        skewX(70deg)
                        scale(1.5);
                    text-shadow: 0 0 20px whitesmoke;
                    opacity: 0;
                }
            }
            @keyframes smoky-mirror {
                60% {
                    text-shadow: 0 0 40px whitesmoke; 
                }
                to {
                    transform:
                        translate3d(18rem,-8rem,0)
                        rotate(-40deg) 
                        skewX(-70deg)
                        scale(2);
                    text-shadow: 0 0 20px whitesmoke;
                    opacity: 0;
                }
                }
            .loader {
                margin-top: 40px;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 50px;
                height: 50px;
                background: #fff;
                border-radius: 10px;
                animation: animate 2s linear infinite;
            }
            @keyframes animate{
                0%{
                    transform: translate(-50%,-50%) perspective(200px) 
                    rotateX(0deg) rotateY(0deg);
                }
                50%{
                    transform: translate(-50%,-50%) perspective(200px) 
                    rotateX(-180deg) rotateY(0deg);
                }
                100%{
                    transform: translate(-50%,-50%) perspective(200px) 
                    rotateX(-180deg) rotateY(-180deg);
                }
            }
        }
    }
    .item6 {
        background: lightsteelblue;
        .lazy-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
    }
    .item7 {
        background: #fff;
        .waterfall-wrapper {
            width: 100%;
            height: 100%;
        }
    }
}
.title {
    height: 40px;
    text-align: center;
    box-sizing: border-box;
    // align-self: flex-start;
    // top: 0;
    color: #aaa;
    position: sticky;
    font-size: 20px;
    background-color: #fff;
    width: 100%;
    line-height: 40px;
    vertical-align: middle;
    color: #000;
    z-index: 2;
}
.sub-title {
    font-size: 16px;
    padding: 20px 0;
    color: #333;
    text-decoration: underline;
    text-decoration-color: #333;
    text-align: center;
}
::-webkit-scrollbar {
    width: 6px;
    height: 100%;
    background-color: #fff;
    opacity: 0.2;
}
::-webkit-scrollbar-thumb { 
    background-color: #aaa;
    border-radius: 8px;
}
</style>